<template>
  <div class="treeGroup-container">
    <v-expansion-panels v-model="subPanels" flat accordion>
      <v-expansion-panel>
        <v-expansion-panel-header disable-icon-rotate class="header">
          <slot name="header">
            <v-card
              height="24"
              color="transparent"
              class="tree-group-header elevation-0 d-flex flex-1 mr-7"
            >
              <v-row no-gutters class="pa-0 d-flex justify-space-between">
                <v-col @click.stop :cols="4">
                  <v-select
                    v-model="sortedTeam"
                    :items="teamItems"
                    clearable
                    dense
                    hide-details
                    outlined
                    solo
                    class="select ml-0"
                    background-color="#fff"
                  >
                    <template #label>
                      <span class="label">All Team</span>
                    </template>
                  </v-select>
                </v-col>
                <v-col @click.stop :cols="4">
                  <v-select
                    v-model="sortedDepartment"
                    :items="departmentItems"
                    clearable
                    dense
                    hide-details
                    outlined
                    solo
                    class="select"
                    background-color="#fff"
                  >
                    <template #label>
                      <span class="label">All Department</span>
                    </template>
                  </v-select>
                </v-col>
                <v-col @click.stop :cols="3">
                  <v-select
                    v-model="sortedStatus"
                    :items="statusItems"
                    clearable
                    dense
                    hide-details
                    outlined
                    solo
                    class="select"
                    background-color="#fff"
                  >
                    <template #label>
                      <span class="label">All Status</span>
                    </template>
                  </v-select>
                </v-col>
              </v-row>
            </v-card>
          </slot>
          <template v-slot:actions>
            <div class="header-append">
              <slot name="headerAppend">
                <v-icon color="#fff" class="pointer"
                  >mdi-unfold-more-horizontal</v-icon
                >
                <v-icon color="#fff" class="pointer active"
                  >mdi-unfold-less-horizontal</v-icon
                >
              </slot>
            </div>
          </template>
        </v-expansion-panel-header>
        <v-expansion-panel-content class="content">
          <v-expansion-panels
            v-bind="$attrs"
            v-model="propOpen"
            class="group"
            multiple
            flat
            accordion
          >
            <v-expansion-panel
              v-on="$listeners"
              v-for="(teamItem, i) in propItems"
              :key="i"
            >
              <v-expansion-panel-header expand-icon="mdi-chevron-up">
                <span>
                  {{ teamItem.department }}-{{ teamItem.team }} ({{
                    getChildrenNum(teamItem.memberList) + 1
                  }})
                </span>
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <v-treeview
                  :items="teamItem.memberList"
                  :filter="filter"
                  :search="search"
                  open-on-click
                  open-all
                  expand-icon="mdi-chevron-down"
                  class="elevation-0 tree-wrap"
                >
                  <template #label="slotData">
                    <v-card
                      class="tree-item"
                      :class="{ active: selectedValue === slotData.item }"
                      color="transparent"
                      outlined
                      @click.stop="selectCard(slotData.item)"
                    >
                      <v-list-item class="flex px-3">
                        <v-list-item-avatar size="32">
                          <img :src="slotData.item.avatar" alt="John" />
                        </v-list-item-avatar>
                        <v-list-item-content>
                          <slot name="list-item-content" v-bind="slotData">
                            <div>
                              <span v-text="slotData.item.userName"></span>
                              <span class="ml-1">
                                ({{ getShortName(slotData.item.userName) }})
                              </span>
                            </div>
                            <div v-text="slotData.item.tel"></div>
                            <div v-text="slotData.item.email"></div>
                          </slot>
                        </v-list-item-content>
                        <v-list-item-action class="test">
                          <v-list-item-action-text
                            v-if="slotData.item.children"
                          >
                            Head
                          </v-list-item-action-text>
                          <v-list-item-action-text
                            v-text="
                              `${slotData.item.department}- ${slotData.item.team}`
                            "
                          ></v-list-item-action-text>
                        </v-list-item-action>
                      </v-list-item>
                    </v-card>
                  </template>
                </v-treeview>
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>

<script lang="ts">
import { Component, Vue, PropSync, ModelSync } from "vue-property-decorator";
import { IMember, ITeam } from "@/components/Maintenance/index";
type ITeamList = ITeam[];
@Component({
  props: {
    open: {
      type: Array,
      default: () => [],
    },
    items: {
      type: Array,
      default: () => [],
    },
  },
})
export default class TreeGroup extends Vue {
  @ModelSync("selected", "input", { type: Object })
  selectedValue!: IMember;

  get propItems(): ITeamList {
    const items: ITeamList = this.$props.items;
    return items;
  }

  getChildrenNum(memberList: IMember[]) {
    let sum = 0;
    memberList.forEach((member) => {
      if (member.children) {
        sum += this.getChildrenNum(member.children);
      } else {
        sum++;
      }
    });
    return sum;
  }

  get search() {
    const sorted = {
      status: this.sortedStatus,
      team: this.sortedTeam,
      department: this.sortedDepartment,
    };
    return JSON.stringify(sorted);
  }
  get filter() {
    return (item: IMember, search: string, textKey: string) => {
      const sorted = JSON.parse(search);
      console.log(sorted, item.status, item.userName);
      let validate = true;
      if (sorted.team && item.team !== sorted.team) {
        validate = false;
      }
      if (
        validate &&
        sorted.department &&
        item.department !== sorted.department
      ) {
        validate = false;
      }
      if (validate && sorted.status && item.status !== sorted.status) {
        validate = false;
      }
      console.log(validate);
      return validate;
    };
  }

  get propOpen() {
    return this.$props.open;
  }

  set propOpen(open: boolean) {
    this.$emit("update:open", open);
  }

  // 获取用户名的缩写
  getShortName(userName: string) {
    const lastName = userName.split(" ")[0];
    return lastName.toUpperCase();
  }

  sortedTeam: string | null = null;
  teamItems = ["Team 1", "Team 2", "Team 3"];
  sortedDepartment: string | null = null;
  departmentItems = ["CS", "ADM", "FSE"];
  sortedStatus = "Active";
  statusItems = ["Active", "Suspended", "Resigned"];

  subPanels = 0;

  selectCard(item: IMember) {
    this.selectedValue = item;
    this.$emit("select", item);
  }
}
</script>

<style lang="scss" scoped>
@import "./TreeGroup.scss";
</style>
